<template>
  <div class="progress-box">
    <div class="progress-detail">
      <span>{{year}}年已经过去了{{days}}/{{daysTotal}}天</span>
      <span>{{percent}}%</span>
    </div>
    <progress :percent="percent" activeColor="#4dc3f3" border-radius="8"></progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      daysTotal: this.isLeapYear() ? 366 : 365
    };
  },
  computed: {
    year() {
      return new Date().getFullYear();
    },
    days() {
      let start = new Date();
      start.setMonth(0);
      start.setDate(1);
      // start就是今年第一天
      // 今天的时间戳 减去今年第一天的时间戳
      let offset = new Date().getTime() - start.getTime();
      return parseInt(offset / 1000 / 60 / 60 / 24) + 1;
    },
    percent() {
      return (this.days * 100 / this.getDayOfYear()).toFixed(1);
    }
  },
  methods: {
    isLeapYear() {
      // 判断是否为闰年
      const year = new Date().getFullYear();
      if (year % 400 === 0) {
        return true;
      } else if (year % 4 === 0 && year % 100 !== 0) {
        return true;
      } else {
        return false;
      }
    },
    getDayOfYear() {
      // 获取今年是多少天
      return this.isLeapYear() ? 366 : 365;
    }
  }
};
</script>

<style>
.progress-box {
  padding: 20px 35px;
}
.progress-box p {
  /* color: #ffffff; */
}
.progress-detail {
  display: flex;
  margin: 0px 0 10px 0;
  font-size: 14px;
}
.progress-detail span:last-child {
  flex: 1;
  text-align: right;
}
</style>